<template>
  <div class="about-page">
    <div class="page-header">
      <h1 class="page-title">关于我们</h1>
      <p class="page-subtitle">了解Vue3微前端子应用的设计理念和技术架构</p>
    </div>

    <div class="content-grid">
      <!-- 项目简介 -->
      <a-card title="项目简介" class="info-card">
        <template #extra>
          <info-circle-outlined />
        </template>
        <p>
          这是一个基于Vue 3和乾坤微前端框架构建的子应用示例。
          它展示了如何在React主应用中集成Vue3子应用，实现跨框架的微前端架构。
        </p>
        <a-divider />
        <div class="info-list">
          <div class="info-item">
            <strong>创建时间:</strong> {{ projectInfo.createTime }}
          </div>
          <div class="info-item">
            <strong>技术栈:</strong> {{ projectInfo.techStack }}
          </div>
          <div class="info-item">
            <strong>开发团队:</strong> {{ projectInfo.team }}
          </div>
        </div>
      </a-card>

      <!-- 架构特性 -->
      <a-card title="架构特性" class="info-card">
        <template #extra>
          <rocket-outlined />
        </template>
        <div class="feature-list">
          <div class="feature-item" v-for="feature in architectureFeatures" :key="feature.id">
            <div class="feature-icon">
              <component :is="feature.icon" />
            </div>
            <div class="feature-content">
              <h4>{{ feature.title }}</h4>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        </div>
      </a-card>

      <!-- 技术优势 -->
      <a-card title="技术优势" class="info-card">
        <template #extra>
          <star-outlined />
        </template>
        <a-timeline>
          <a-timeline-item v-for="advantage in techAdvantages" :key="advantage.id" :color="advantage.color">
            <template #dot>
              <component :is="advantage.icon" />
            </template>
            <h4>{{ advantage.title }}</h4>
            <p>{{ advantage.description }}</p>
          </a-timeline-item>
        </a-timeline>
      </a-card>

      <!-- 使用场景 -->
      <a-card title="适用场景" class="info-card">
        <template #extra>
          <desktop-outlined />
        </template>
        <div class="scenario-grid">
          <div class="scenario-item" v-for="scenario in useScenarios" :key="scenario.id">
            <div class="scenario-header">
              <component :is="scenario.icon" class="scenario-icon" />
              <h4>{{ scenario.title }}</h4>
            </div>
            <p>{{ scenario.description }}</p>
            <a-tag v-for="tag in scenario.tags" :key="tag" :color="getRandomColor()">
              {{ tag }}
            </a-tag>
          </div>
        </div>
      </a-card>
    </div>

    <!-- 联系信息 -->
    <div class="contact-section">
      <a-card title="联系我们" class="contact-card">
        <div class="contact-grid">
          <div class="contact-item">
            <mail-outlined class="contact-icon" />
            <div>
              <h4>邮箱</h4>
              <p>vue3-micro@example.com</p>
            </div>
          </div>
          <div class="contact-item">
            <github-outlined class="contact-icon" />
            <div>
              <h4>GitHub</h4>
              <p>github.com/vue3-microfrontend</p>
            </div>
          </div>
          <div class="contact-item">
            <global-outlined class="contact-icon" />
            <div>
              <h4>官网</h4>
              <p>vue3-micro.example.com</p>
            </div>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  InfoCircleOutlined,
  RocketOutlined,
  StarOutlined,
  DesktopOutlined,
  MailOutlined,
  GithubOutlined,
  GlobalOutlined,
  SafetyOutlined,
  ThunderboltOutlined,
  BugOutlined,
  ApiOutlined,
  TeamOutlined,
  BankOutlined,
  ShopOutlined,
  CloudOutlined
} from '@ant-design/icons-vue'

// 项目信息
const projectInfo = ref({
  createTime: '2024年8月',
  techStack: 'Vue 3 + Vite + Qiankun + Ant Design Vue',
  team: '前端开发团队'
})

// 架构特性
const architectureFeatures = ref([
  {
    id: 1,
    icon: SafetyOutlined,
    title: '沙箱隔离',
    description: '完全隔离的运行环境，避免样式和JS冲突'
  },
  {
    id: 2,
    icon: ThunderboltOutlined,
    title: '按需加载',
    description: '支持动态加载，减少初始包大小'
  },
  {
    id: 3,
    icon: BugOutlined,
    title: '独立开发',
    description: '可以独立开发、测试和部署'
  },
  {
    id: 4,
    icon: ApiOutlined,
    title: '通信机制',
    description: '提供完善的父子应用通信方案'
  }
])

// 技术优势
const techAdvantages = ref([
  {
    id: 1,
    icon: RocketOutlined,
    title: '开发效率',
    description: '热重载、快速构建，提升开发体验',
    color: 'green'
  },
  {
    id: 2,
    icon: SafetyOutlined,
    title: '稳定可靠',
    description: '成熟的微前端解决方案，生产环境验证',
    color: 'blue'
  },
  {
    id: 3,
    icon: TeamOutlined,
    title: '团队协作',
    description: '支持多团队并行开发，提高协作效率',
    color: 'purple'
  },
  {
    id: 4,
    icon: GlobalOutlined,
    title: '技术栈自由',
    description: '不同子应用可以使用不同的技术栈',
    color: 'orange'
  }
])

// 使用场景
const useScenarios = ref([
  {
    id: 1,
    icon: BankOutlined,
    title: '企业级应用',
    description: '大型企业内部系统，需要整合多个业务模块',
    tags: ['后台管理', '业务系统', '数据看板']
  },
  {
    id: 2,
    icon: ShopOutlined,
    title: '电商平台',
    description: '复杂的电商系统，包含商品、订单、用户等模块',
    tags: ['商品管理', '订单系统', '用户中心']
  },
  {
    id: 3,
    icon: CloudOutlined,
    title: '云平台',
    description: '云服务平台，集成多种云服务和管理工具',
    tags: ['资源管理', '监控告警', '运维工具']
  },
  {
    id: 4,
    icon: TeamOutlined,
    title: '多团队协作',
    description: '多个开发团队维护不同的业务模块',
    tags: ['独立部署', '技术栈自由', '并行开发']
  }
])

// 随机颜色生成器
const colors = ['blue', 'green', 'orange', 'purple', 'cyan', 'geekblue']
const getRandomColor = () => {
  return colors[Math.floor(Math.random() * colors.length)]
}
</script>

<style scoped>
.about-page {
  padding: 24px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 36px;
  color: #2c3e50;
  margin-bottom: 12px;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.content-grid {
  display: grid;
  gap: 24px;
  margin-bottom: 40px;
}

.info-card {
  height: 100%;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  padding: 8px 0;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.feature-icon {
  font-size: 24px;
  color: #1890ff;
  margin-top: 4px;
}

.feature-content h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
}

.feature-content p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

.scenario-grid {
  display: grid;
  gap: 20px;
}

.scenario-item {
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.scenario-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #1890ff;
}

.scenario-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.scenario-icon {
  font-size: 20px;
  color: #1890ff;
}

.scenario-header h4 {
  margin: 0;
  color: #2c3e50;
}

.scenario-item p {
  color: #666;
  margin-bottom: 12px;
  line-height: 1.6;
}

.contact-section {
  margin-top: 40px;
}

.contact-card {
  max-width: 800px;
  margin: 0 auto;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.contact-icon {
  font-size: 24px;
  color: #1890ff;
}

.contact-item h4 {
  margin: 0 0 4px 0;
  color: #2c3e50;
}

.contact-item p {
  margin: 0;
  color: #666;
}

/* 响应式设计 */
@media (min-width: 768px) {
  .content-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 28px;
  }
  
  .scenario-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
</style>